<!DOCTYPE html> 
<html data-ng-app="App">
  <head>
    <link rel="stylesheet" type="text/css" href="./example.animate.css" />
    <title>Animate.css Testing Article</title>
    <style type="text/css">
      .element {
        background:#eee;
        height:200px;
        border:1px solid black;
      }
      body {
        background:#ddd;
      }
      section { 
        margin:1em;
        padding:1em;
        border:1px solid #ddd;
      }
    </style>
  </head>

  <body>
    <section>
      <h2>.dn-fade (ngClass)</h2>
      <button ng-click="dn_fade=!dn_fade">Toggle Class</button>
      <div class="element" ng-class="{'dn-fade':dn_fade}">
        ...
      </div>

      <h2>.dn-fade (ngShow)</h2>
      <button ng-click="dn_fade_ngShow=!dn_fade_ngShow">Toggle Show / Hide</button>
      <div class="element dn-fade" ng-show="dn_fade_ngShow">
        ...
      </div>
    </section>

    <section>
      <h2>.dn-fade-up</h2>
      <button ng-click="dn_fade_up=!dn_fade_up">Toggle Class</button>
      <div class="element" ng-class="{'dn-fade-up':dn_fade_up}">
        ...
      </div>
    </section>

    <section>
      <h2>.dn-fade-down</h2>
      <button ng-click="dn_fade_down=!dn_fade_down">Toggle Class</button>
      <div class="element" ng-class="{'dn-fade-down':dn_fade_down}">
        ...
      </div>
    </section>

    <section>
      <h2>.dn-fade-left</h2>
      <button ng-click="dn_fade_left=!dn_fade_left">Toggle Class</button>
      <div class="element" ng-class="{'dn-fade-left':dn_fade_left}">
        ...
      </div>
    </section>

    <section>
      <h2>.dn-fade-right</h2>
      <button ng-click="dn_fade_right=!dn_fade_right">Toggle Class</button>
      <div class="element" ng-class="{'dn-fade-right':dn_fade_right}">
        ...
      </div>
    </section>

    <section>
      <h2>.dn-fade-up-big</h2>
      <button ng-click="dn_fade_up_big=!dn_fade_up_big">Toggle Class</button>
      <div class="element" ng-class="{'dn-fade-up-big':dn_fade_up_big}">
        ...
      </div>
    </section>

    <section>
      <h2>.dn-fade-down-big</h2>
      <button ng-click="dn_fade_down_big=!dn_fade_down_big">Toggle Class</button>
      <div class="element" ng-class="{'dn-fade-down-big':dn_fade_down_big}">
        ...
      </div>
    </section>

    <section>
      <h2>.dn-fade-left-big</h2>
      <button ng-click="dn_fade_left_big=!dn_fade_left_big">Toggle Class</button>
      <div class="element" ng-class="{'dn-fade-left-big':dn_fade_left_big}">
        ...
      </div>
    </section>

    <section>
      <h2>.dn-fade-right-big</h2>
      <button ng-click="dn_fade_right_big=!dn_fade_right_big">Toggle Class</button>
      <div class="element" ng-class="{'dn-fade-right-big':dn_fade_right_big}">
        ...
      </div>
    </section>

    <section>
      <h2>.dn-flip-x</h2>
      <button ng-click="dn_flip_x=!dn_flip_x">Toggle Class</button>
      <div class="element" ng-class="{'dn-flip-x':dn_flip_x}">
        ...
      </div>
    </section>

    <section>
      <h2>.dn-flip-y</h2>
      <button ng-click="dn_flip_y=!dn_flip_y">Toggle Class</button>
      <div class="element" ng-class="{'dn-flip-y':dn_flip_y}">
        ...
      </div>
    </section>

    <section>
      <h2>.dn-bounce</h2>
      <button ng-click="dn_bounce=!dn_bounce">Toggle Class</button>
      <div class="element" ng-class="{'dn-bounce':dn_bounce}">
        ...
      </div>
    </section>

    <section>
      <h2>.dn-bounce-up</h2>
      <button ng-click="dn_bounce_up=!dn_bounce_up">Toggle Class</button>
      <div class="element" ng-class="{'dn-bounce-up':dn_bounce_up}">
        ...
      </div>
    </section>

    <section>
      <h2>.dn-bounce-down</h2>
      <button ng-click="dn_bounce_down=!dn_bounce_down">Toggle Class</button>
      <div class="element" ng-class="{'dn-bounce-down':dn_bounce_down}">
        ...
      </div>
    </section>

    <section>
      <h2>.dn-bounce-left</h2>
      <button ng-click="dn_bounce_left=!dn_bounce_left">Toggle Class</button>
      <div class="element" ng-class="{'dn-bounce-left':dn_bounce_left}">
        ...
      </div>
    </section>

    <section>
      <h2>.dn-bounce-right</h2>
      <button ng-click="dn_bounce_right=!dn_bounce_right">Toggle Class</button>
      <div class="element" ng-class="{'dn-bounce-right':dn_bounce_right}">
        ...
      </div>
    </section>

    <section>
      <h2>.dn-rotate</h2>
      <button ng-click="dn_rotate=!dn_rotate">Toggle Class</button>
      <div class="element" ng-class="{'dn-rotate':dn_rotate}">
        ...
      </div>
    </section>

    <section>
      <h2>.dn-rotate-up-left</h2>
      <button ng-click="dn_rotate_up_left=!dn_rotate_up_left">Toggle Class</button>
      <div class="element" ng-class="{'dn-rotate-up-left':dn_rotate_up_left}">
        ...
      </div>
    </section>

    <section>
      <h2>.dn-rotate-down-left</h2>
      <button ng-click="dn_rotate_down_left=!dn_rotate_down_left">Toggle Class</button>
      <div class="element" ng-class="{'dn-rotate-down-left':dn_rotate_down_left}">
        ...
      </div>
    </section>

    <section>
      <h2>.dn-rotate-up-right</h2>
      <button ng-click="dn_rotate_up_right=!dn_rotate_up_right">Toggle Class</button>
      <div class="element" ng-class="{'dn-rotate-up-right':dn_rotate_up_right}">
        ...
      </div>
    </section>

    <section>
      <h2>.dn-rotate-down-right</h2>
      <button ng-click="dn_rotate_down_right=!dn_rotate_down_right">Toggle Class</button>
      <div class="element" ng-class="{'dn-rotate-down-right':dn_rotate_down_right}">
        ...
      </div>
    </section>


    <section>
      <h2>.dn-lightspeed</h2>
      <button ng-click="dn_lightspeed=!dn_lightspeed">Toggle Class</button>
      <div class="element" ng-class="{'dn-lightspeed':dn_lightspeed}">
        ...
      </div>
    </section>

    <section>
      <h2>.dn-roll</h2>
      <button ng-click="dn_roll=!dn_roll">Toggle Class</button>
      <div class="element" ng-class="{'dn-roll':dn_roll}">
        ...
      </div>
    </section>

    <section>
      <h2>.dn-hinge</h2>
      <button ng-click="dn_hinge=!dn_hinge">Toggle Class</button>
      <div class="element" ng-class="{'dn-hinge':dn_hinge}">
        ...
      </div>
    </section>

    <script src="http://code.angularjs.org/1.2.4/angular.js"></script>
    <script src="http://code.angularjs.org/1.2.4/angular-animate.js"></script>

    <script type="text/javascript" src="./animate.js"></script>
    <script type="text/javascript">
      angular.module('App', ['ngAnimate-animate.css']);
    </script>
  <body>
</html>
